<script lang="ts" setup>
import { useOrderDetail } from '@/hooks'
const onCheckOrder = () => {
  if (orderDetail.value?.id) {
    uni.navigateTo({
      url: `/subpkg_medicine/pages/order_detail/order_detail?orderId=${orderDetail.value.id}`,
    })
  }
}

const onBackHome = () => {
  if (orderDetail.value?.roomId) {
    uni.navigateTo({
      url: `/subpkg_consult/pages/room/room?orderId=${orderDetail.value.roomId}`,
    })
  }
}
// const orderDetail = ref<MedicineOrderDetail>()
const props = defineProps<{
  orderId: string
}>()
// 调用封装的订单详情函数
useOrderDetail(props.orderId)
const {orderDetail} = useOrderDetail(props.orderId)
</script>
<template>
  <view class="pay-result-page">
    <view class="pay-result">
      <view class="icon">
        <uni-icons type="checkmarkempty" size="60" color="#16C2A3" />
      </view>
      <view class="amount">¥{{orderDetail?.actualPayment.toFixed(2) || '0.00'}}</view>
      <view class="status">支付成功</view>
      <view class="tip">订单支付成功，已通知药房尽快发货，请耐心等待</view>
      <view class="info">
        <view class="tip">
          <text class="label">订单编号：</text>
          <text class="value">{{ orderDetail?.orderNo }}</text>
        </view>
        <view class="tip">
          <text class="label">下单时间：</text>
          <text class="value">{{ orderDetail?.createTime }}</text>
        </view>
        <view class="tip">
          <text class="label">支付时间：</text>
          <text class="value">{{ orderDetail?.payTime }}</text>
        </view>
      </view>
    </view>
    <view class="buttons">
      <button class="uni-button" @click="onCheckOrder">查看订单</button>
      <button class="uni-button plain" @click="onBackHome">返回诊室</button>
    </view>
  </view>
</template>



<style lang="scss">
.info {
      width: 100%;
      padding: 20rpx 40rpx 0;
      font-size: 26rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
    }

    .tip {
      width: 100%;
      padding: 20rpx 40rpx 0;
      font-size: 26rpx;
    }
      .label {
        color: #848484;
      }

      .value {
        color: #121826;
        margin-left: 10rpx;
      }
.pay-result-page {
  padding: 100rpx 32rpx;
  background-color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
}

.pay-result {
  display: flex;
  flex-direction: column;
  align-items: center;

  .icon {
    width: 120rpx;
    height: 120rpx;
    background-color: #f4faf9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .amount {
    font-size: 68rpx;
    color: #333;
    margin-top: 40rpx;
  }

  .status {
    font-size: 32rpx;
    color: #333;
    margin-top: 12rpx;
  }

  .tip {
    font-size: 26rpx;
    color: #666;
    margin-top: 24rpx;
  }
}

.buttons {
  margin-top: 80rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .uni-button {
    width: 100%;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    border-radius: 45rpx;
    font-size: 32rpx;

    // 主按钮样式
    background-color: #16c2a3;
    color: #fff;

    // 次要按钮样式
    &.plain {
      background-color: #fff;
      color: #16c2a3;
      border: 1px solid #16c2a3;
    }
  }
}
</style>
